<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <title>ExcelTest</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/webjars/layui/2.4.5/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<table class="layui-hide" id="test"></table>


<body>
    <script src="/webjars/layui/2.4.5/layui.js" charset="utf-8"></script>

    <script>
        layui.use('table', function () {
            var table = layui.table;

            table.render({
                elem: '#test'
                , url: 'http://localhost:8080/getAllList'
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [
                    [
                        { field: 'id', width: 80, title: 'ID', sort: true }
                        , { field: 'name', width: 80, title: '用户名' }
                        , { field: 'city', width: 80, title: '城市' }
                        , { field: 'address', title: '地址', width: '30%', minWidth: 100 } //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                        , { field: 'phone', title: '手机', sort: true }
                        , { field: 'goodsCode', title: '商品编号' }
                        , { field: 'goodsCount', width: 137, title: '商品数量', sort: true }
                    ]
                ]
            });
        });

    </script>

</body>

</html>